<template>
<el-container>
  <el-header>
    <el-row>
      <el-col :span="9"><div>
      <el-menu class="el-menu-demo" mode="horizontal" router >
          <el-menu-item index="/"><img width="80px" src="../assets/20201124032511.png" /></el-menu-item>
          <el-tooltip v-for="(val, key) in nav" :key='key'  :content="val.desc" placement="bottom" visible-arrow=false :open-delay=1000>
            <el-menu-item v-bind:index='key.toString()'>{{val.name}}</el-menu-item>
          </el-tooltip>
      </el-menu>
      </div></el-col>
      <el-col :span="7">
        <div>
          <el-form :inline="true"  class="demo-form-inline" id="form-search">
             <el-input v-model="keyword"  @input="forceUpdate" clearable></el-input>
            <el-button icon="el-icon-search">搜索</el-button>
          </el-form>
        </div>
      </el-col>

      <el-col :span="8"><div id="right">
        <el-menu class="el-menu-demo" mode="horizontal" >
          <el-menu-item index="8">
            <el-popover
                id="user"
                placement="bottom"
                width="200"
                trigger="hover">
                <div class="msggg">
                  {{userinfo.nickname}}
                  <div class="msgg_cen">
                    <span><h2>11</h2>粉丝</span>
                   <span><h2>12</h2>获赞</span>
                   <span> <h2>13</h2>关注</span>
                  </div>
                  <div class="msgg_bot">
                    <router-link to="user"><div>个人中心</div></router-link>
                    <div>内容管理</div>
                    <div>学习平台</div>
                    <div>我的订单</div>
                    <div>我的钱包</div>
                    <div>签到抽奖</div>
                    <div @click="logOut">退出</div>
                  </div>
                </div>
                 <el-avatar id="avat" slot="reference" :src="userinfo.image"><el-button slot="reference"></el-button></el-avatar>
              </el-popover>
              </el-menu-item>
            <el-menu-item index="9">会员中心</el-menu-item>
            <el-menu-item index="10">收藏</el-menu-item>
            <el-menu-item index="11">动态</el-menu-item>
            <el-menu-item index="12">消息</el-menu-item>
            <el-menu-item index="13">创作</el-menu-item>
        </el-menu>
      </div></el-col>
    </el-row>
  </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      nav: {
      },
      menu: {
      },
      userinfo: {
      },
      keyword: ''
    }
  },
  methods: {
    logOut () {
      window.localStorage.removeItem('userinfo')
      this.$message({
        message: '您已经退出，继续操作请重新登录',
        type: 'success'
      })
      this.$router.push({name: 'Login'})
    },
    forceUpdate () {
      this.$forceUpdate()
    }
  },
  mounted () {
    var token = window.localStorage.getItem('userinfo')
    this.userinfo = JSON.parse(token)
    console.log(this.userinfo)
    if (!token) {
      this.userinfo = false
      document.getElementById('user').innerHTML = '<a href="#/login"> 登录/注册 </a>'
    }
    var url = 'http://120.27.129.163/iblog/index.php/article'
    this.$http.get(url).then((backdata) => {
      var res = backdata.data
      this.nav = res.data.nav
      this.menu = res.data.cate
    })
  }
}
</script>

<style>
  #right{
    float:right;
  }
  .el-row{
    height: 80px;
  }
  .el-header{
    width: 100%;
    position: fixed;
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    line-height: 60px;
    z-index: 100;
  }
  .el-main {
    margin-top: 30px;
  }
  #avat:hover{
    width: 50px !important;
    height: 50px !important;
  }
  .msggg{
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .msggg hr{
    width: 100%;
  }
  .msgg_cen{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .msgg_bot{
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .msgg_bot div{
    height: 40px;
    color: #737373;
    line-height: 40px;
    width: 100%;
  }
  .msgg_bot div:hover{
    background-color: #f4f5f5;
    cursor: pointer;
  }
  .el-main{
    border-bottom: 0px;
  }
  #form-search{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  #form-search .el-button{
    margin-left: 20px;
  }
</style>
